<template>
	<view class="group">
		<view class="head_portrait">
			<view class="portrait">
				<image :src="userInfo.avatar || this.$imgUrl + configInfo.logo"></image>
				<view>
					<span @click="getUserInfo">{{userInfo.nick||'授权登录'}}</span>
					<p @click="getUserInfo">{{userInfo.mobile||'立即开启上门之旅吧~~'}}</p>
				</view>
			</view>
			<view class="tab">
				<p>{{teamInfo.referrer_count}}
					<span>直推人数</span>
				</p>
				<p>{{teamInfo.order_count}}
					<span>订单总数</span>
				</p>
				<p>{{teamInfo.total_income}}
					<span>累计收益</span>
				</p>
			</view>
		</view>
		<view class="main">
			<nav>
				<p @click='Switcher(0)' :class="{'p':index==0}">我的团队<span></span></p>
				<p @click='Switcher(1)' :class="{'p':index==1}">收益记录<span></span></p>
			</nav>

			<image v-if="dataList.length==0" src="../../../../static/image.png"></image>

			<groupList :index='index' v-for="item in dataList" :item='item'></groupList>
		</view>
	</view>
</template>

<script>
	import groupList from '../../../../components/group_list/group_list.vue'
	export default {
		components: {
			groupList
		},
		data() {
			return {
				index: 0,
				falg: true,
				configInfo: {},
				userInfo: {},
				teamInfo: {
					referrer_count: 0,
					order_count: 0,
					total_income: 0,
				},
				datePage: 1,
				dataList: [],
			};
		},
		methods: {
			Switcher(index) {
				if (this.index !== index) {
					this.index = index;
					this.dataList = [];
					this.getTeamList(index);
				}
			},
			getUserInfo() {
				this.$httpRequest('/user/getUserInfo').then(res => {
					this.userInfo = res.data;
				});
			},
			getTeamInfo() {
				this.$httpRequest('/user/getTeamInfo').then(res => {
					this.teamInfo = res.data;
				});
			},
			getTeamList(index) {
				if (index == 0) {
					// 我的团队
					this.$httpRequest('/user/getTeamList', {
						page: this.datePage
					}).then(res => {
						if (res.data.last_page > res.data.current_page) {
							this.datePage++;
						} else {
							this.falg = false
						}
						this.dataList.push(...res.data.data)
					});
				} else {
					// 收益记录
					this.$httpRequest('/user/getTeamIncomeList', {
						page: this.datePage
					}).then(res => {
						if (res.data.last_page > res.data.current_page) {
							this.datePage++;
						} else {
							this.falg = false
						}
						this.dataList.push(...res.data.data)
					});
				}
			},
		},
		// 触底刷新
		onReachBottom() {
			if (this.falg) {
				this.getTeamList(this.index);
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.dataList = [];
			this.getTeamList(this.index);
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.getUserInfo();
			this.configInfo = JSON.parse(uni.getStorageSync('configInfo'));
			this.getTeamInfo();
			this.getTeamList(this.index);
		}
	}
</script>

<style lang="less">
	.group {

		&>.head_portrait {
			width: 100%;
			padding: 30rpx 30rpx 50rpx;
			box-sizing: border-box;
			color: #333;
			background: linear-gradient(180deg, #53C277 0%, #81E2A8 100%);

			&>.tab {
				width: 100%;
				display: flex;

				&>p {
					flex: 1;
					font-size: 18px;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 40rpx;

					&>span {
						font-size: 13px;
						margin-top: 16rpx;
					}
				}
			}

			&>.portrait {
				display: flex;

				&>image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>view {
					margin-left: 30rpx;
					flex: 1;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					&>p {
						color: #5E5E5E;
						font-size: 12px;
					}

					&>view {
						display: flex;
						justify-content: space-between;
						font-size: 15px;

						&>p {
							display: flex;
							align-items: center;

							img {
								width: 28rpx;
								height: 28rpx;
								margin: 0 20rpx;
							}
						}
					}
				}
			}
		}

		&>.main {
			width: 100%;
			background: #F0F0F0;
			border-radius: 40rpx 40rpx 0 0;
			transform: translateY(-30rpx);

			&>image {
				width: 616rpx;
				height: 616rpx;
				display: block;
				margin: 100rpx auto 0;
			}

			&>nav {
				width: 100%;
				height: 86rpx;
				display: flex;

				&>.p {
					color: #3B7933;

					&>span {
						background: #3B7933;
					}
				}

				&>p {
					flex: 1;
					height: 100%;
					display: flex;
					font-size: 13px;
					color: #999999;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					&>span {
						width: 70rpx;
						height: 10rpx;
						border-radius: 5rpx;
						background: #3B793300;
						margin-top: 6rpx;
					}
				}
			}
		}
	}
</style>